
{extend name='public/bootstrap' /}

{block name="content"}
<div class="row">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">

            <div class="ibox-content">
                <form  class="form-horizontal" id="commentForm" >
                    <div class="form-group">
                        <label class="col-sm-3 control-label">名字：</label>
                        <div class="col-sm-8">
                            <input id="lastname" name="lastname" class="form-control" type="text" aria-required="true" aria-invalid="false" class="valid">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">用户名：</label>
                        <div class="col-sm-8">
                            <input id="username" name="username" class="form-control" type="text" aria-required="true" aria-invalid="true" class="error">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">密码：</label>
                        <div class="col-sm-8">
                            <input id="password" name="password" class="form-control" type="password">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">确认密码：</label>
                        <div class="col-sm-8">
                            <input id="confirm_password" name="confirm_password" class="form-control" type="password">
                            <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 请再次输入您的密码</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">E-mail：</label>
                        <div class="col-sm-8">
                            <input id="email" name="email" class="form-control" type="email">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-8 col-sm-offset-3">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" class="checkbox" id="agree" name="agree"> 我已经认真阅读并同意《H+使用协议》
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">密码</label>

                        <div class="col-sm-10">
                            <input type="password" class="form-control" name="password" >
                            <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 请输入密码</span>
                        </div>
                    </div>


                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">禁用</label>

                        <div class="col-sm-10">
                            <input type="text" disabled="" placeholder="已被禁用" class="form-control">
                        </div>
                    </div>

                    <div class="hr-line-dashed"></div>

                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">复选框&amp;单选框
                            <br/><small class="text-navy">自定义样式</small>
                        </label>

                        <div class="col-sm-10">
                            <div class="checkbox i-checks">
                                <label>
                                    <input type="checkbox" value=""> <i></i> 选项1</label>
                            </div>
                            <div class="checkbox i-checks">
                                <label>
                                    <input type="checkbox" value="" checked=""> <i></i> 选项2（选中）</label>
                            </div>
                            <div class="checkbox i-checks">
                                <label>
                                    <input type="checkbox" value="" disabled="" checked=""> <i></i> 选项3（选中并禁用）</label>
                            </div>
                            <div class="checkbox i-checks">
                                <label>
                                    <input type="checkbox" value="" disabled=""> <i></i> 选项4（禁用）</label>
                            </div>
                            <div class="radio i-checks">
                                <label>
                                    <input type="radio" value="option1" name="a"> <i></i> 选项1</label>
                            </div>
                            <div class="radio i-checks">
                                <label>
                                    <input type="radio" checked="" value="option2" name="a"> <i></i> 选项2（选中）</label>
                            </div>
                            <div class="radio i-checks">
                                <label>
                                    <input type="radio" disabled="" checked="" value="option2"> <i></i> 选项3（选中并禁用）</label>
                            </div>
                            <div class="radio i-checks">
                                <label>
                                    <input type="radio" disabled="" name="a"> <i></i> 选项4（禁用）</label>
                            </div>
                        </div>
                    </div>

                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Select</label>

                        <div class="col-sm-10">
                            <select class="form-control m-b" name="account">
                                <option>选项 1</option>
                                <option>选项 2</option>
                                <option>选项 3</option>
                                <option>选项 4</option>
                            </select>
                        </div>
                    </div>
                  <!--  <div class="hr-line-dashed"></div>
                    <div class="form-group has-success">
                        <label class="col-sm-2 control-label">验证通过</label>

                        <div class="col-sm-10">
                            <input type="text" class="form-control">
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group has-warning">
                        <label class="col-sm-2 control-label">未填写</label>

                        <div class="col-sm-10">
                            <input type="text" class="form-control">
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group has-error">
                        <label class="col-sm-2 control-label">验证未通过</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control">
                        </div>
                    </div>-->

                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">列尺寸</label>

                        <div class="col-sm-10">
                            <div class="row">
                                <div class="col-md-2">
                                    <input type="text" placeholder=".col-md-2" class="form-control">
                                </div>
                                <div class="col-md-3">
                                    <input type="text" placeholder=".col-md-3" class="form-control">
                                </div>
                                <div class="col-md-4">
                                    <input type="text" placeholder=".col-md-4" class="form-control">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">文本框组</label>

                        <div class="col-sm-10">
                            <div class="input-group m-b"><span class="input-group-addon">@</span>
                                <input type="text" placeholder="用户名" class="form-control">
                            </div>
                            <div class="input-group m-b">
                                <input type="text" class="form-control"> <span class="input-group-addon">.00</span>
                            </div>
                            <div class="input-group m-b"><span class="input-group-addon">&yen;</span>
                                <input type="text" class="form-control"> <span class="input-group-addon">.00</span>
                            </div>
                            <div class="input-group m-b"><span class="input-group-addon"> <input type="checkbox"> </span>
                                <input type="text" class="form-control">
                            </div>
                            <div class="input-group"><span class="input-group-addon"> <input type="radio"> </span>
                                <input type="text" class="form-control">
                            </div>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">按钮插件</label>

                        <div class="col-sm-10">
                            <div class="input-group m-b"><span class="input-group-btn">
                                            <button type="button" class="btn btn-primary">搜</button> </span>
                                <input type="text" class="form-control">
                            </div>
                            <div class="input-group">
                                <input type="text" class="form-control"> <span class="input-group-btn"> <button type="button" class="btn btn-primary">搜索
                                        </button> </span>
                            </div>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">带下拉框</label>

                        <div class="col-sm-10">
                            <div class="input-group m-b">
                                <div class="input-group-btn">
                                    <button data-toggle="dropdown" class="btn btn-white dropdown-toggle" type="button">操作 <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li><a href="form_basic.html#">选项1</a>
                                        </li>
                                        <li><a href="form_basic.html#">选项2</a>
                                        </li>
                                        <li><a href="form_basic.html#">选项3</a>
                                        </li>
                                        <li class="divider"></li>
                                        <li><a href="form_basic.html#">选项4</a>
                                        </li>
                                    </ul>
                                </div>
                                <input type="text" class="form-control">
                            </div>

                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">分段</label>

                        <div class="col-sm-10">
                            <div class="input-group m-b">
                                <div class="input-group-btn">
                                    <button tabindex="-1" class="btn btn-white" type="button">操作</button>
                                    <button data-toggle="dropdown" class="btn btn-white dropdown-toggle" type="button"><span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li><a href="form_basic.html#">选项1</a>
                                        </li>
                                        <li><a href="form_basic.html#">选项2</a>
                                        </li>
                                        <li><a href="form_basic.html#">选项3</a>
                                        </li>
                                        <li class="divider"></li>
                                        <li><a href="form_basic.html#">选项4</a>
                                        </li>
                                    </ul>
                                </div>
                                <input type="text" class="form-control">
                            </div>
                            <div class="input-group">
                                <input type="text" class="form-control">

                                <div class="input-group-btn">
                                    <button tabindex="-1" class="btn btn-white" type="button">操作</button>
                                    <button data-toggle="dropdown" class="btn btn-white dropdown-toggle" type="button"><span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu pull-right">
                                        分段
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group" style="margin-bottom: 15px;clear: both;">
                        <div class="col-sm-4 col-sm-offset-2">
                            <button class="btn btn-primary" type="button">保存内容</button>
                            <button class="btn btn-white" type="button">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

{/block}

{block name="js"}

<script>
    //以下为官方示例
    $().ready(function () {

        // validate signup form on keyup and submit
        var icon = "<i class='fa fa-times-circle'></i> ";
        $("#commentForm").validate({
            rules: {
                firstname: "required",
                lastname: "required",
                username: {
                    required: true,
                    minlength: 2
                },
                password: {
                    required: true,
                    minlength: 5
                },
                confirm_password: {
                    required: true,
                    minlength: 5,
                    equalTo: "#password"
                },
                email: {
                    required: true,
                    email: true
                },
                topic: {
                    required: "#newsletter:checked",
                    minlength: 2
                },
                agree: "required"
            },
            messages: {
                firstname: icon + "请输入你的姓",
                lastname: icon + "请输入您的名字",
                username: {
                    required: icon + "请输入您的用户名",
                    minlength: icon + "用户名必须两个字符以上"
                },
                password: {
                    required: icon + "请输入您的密码",
                    minlength: icon + "密码必须5个字符以上"
                },
                confirm_password: {
                    required: icon + "请再次输入密码",
                    minlength: icon + "密码必须5个字符以上",
                    equalTo: icon + "两次输入的密码不一致"
                },
                email: icon + "请输入您的E-mail",
                agree: {
                    required: icon + "必须同意协议后才能注册",
                    element: '#agree-error'
                }
            }
        });

        // propose username by combining first- and lastname
        $("#username").focus(function () {
            var firstname = $("#firstname").val();
            var lastname = $("#lastname").val();
            if (firstname && lastname && !this.value) {
                this.value = firstname + "." + lastname;
            }
        });
    });
</script>

{/block}